<template>
    <div class="app-container">
        <div class="filter-container">
            <el-page-header @back="goBack" content="公告详情">
            </el-page-header>
        </div>

        <el-form ref="form" :model="form" label-width="100px">
            <!-- <el-form-item label="公司" prop="uid">
                <el-upload
                    class="avatar-uploader"
                    action="http://8.134.110.170:100/api/Banlist/update"
                    :show-file-list="false"
                    :on-success="handleonsuccess">
                    <img v-if="form.image" :src="form.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item> -->
            <el-form-item label="消息标题" prop="title">
                <el-input v-model="form.title" placeholder="公告标题" />
            </el-form-item>
            <el-form-item label="消息详情" prop="content">
                <tinymce ref="editor" v-model="form.content" :height="160" />
            </el-form-item>
            <el-form-item label="状态">
                    <el-select v-model="form.status" class="filter-item" placeholder="Please select">
                        <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name"
                            :value="item.key" />
                    </el-select>
                </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即修改</el-button>
                <el-button>返回</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import {
    getUserList, getDetails, updateArticle,
} from '@/api/gxx'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Tinymce from '@/components/Tinymce'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
const statusOptions = [
    { key: 1, display_name: '启用' },
    { key: 2, display_name: '封禁' }
]
export default {
    name: 'ComplexTable',
    components: { Pagination, Tinymce },
    directives: { waves },
    data() {
        return {
            id: '',
            uList: [],
            statusOptions,
            form: {
                uid: '',
                title: '',
                content: '',
                sex: '',
                status: '',
                image:''
            }
        }
    },
    created() {
        let id = this.$route.query.id;
        console.log(this.$route.query.id)
        // this.id = id
        // this.getUserLists()
        this.getDetail(id)
    },
    methods: {
        goBack() {
            // this.$router.back()
            this.$router.go(-1)
            console.log('go back');
        },
        //获取公告详细信息
        getDetail(row) {
            getDetails({ id: row }).then(response => {
                console.log(response.data)
                this.form = response.data
            })
        },
        //获取公司信息
        getUserLists() {
            getUserList().then(response => {
                console.log(response.data)
                this.uList = response.data
            })
        },
        handleRemove(file, fileList) {
            console.log(file);
            this.form.image = ''
        },
        handlePreview(file) {
            console.log(file);
        },
        handleonsuccess(response, file){
            console.log(file);
            this.form.image = file.response.data
            console.log(this.temp);
        },
        onSubmit() {
            updateArticle(this.form).then(response => {
                console.log(response)
                if (response.code == 200) {
                    this.$notify({
                        title: 'Success',
                        message: 'Created Successfully',
                        type: 'success',
                        duration: 2000
                    })
                    // this.$router.go(-1)
                    setTimeout(() => {
                        // this.$router.push({
                        //     '/gxx/index'
                        // })
                        this.$router.replace({ path: '/gxx/index'})
                        // this.$router.go(-1)
                    }, 1000);
                } else {
                    this.$notify({
                        title: '失败',
                        message: response.message,
                        type: 'error',
                        duration: 2000
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.filter-container {
    width: 100%;
    height: 48px;
}
.avatar{
    width:200px;
    height:200px;
}
</style>